跳到主要内容

next js之入门安装教程

· 阅读需 4 分钟
文浩Marvin

自动安装

我们建议使用 create-next-app 来开始一个新的 Next.js 应用,它会自动为您设置好一切。要创建一个项目,请运行:

npx create-next-app@latest

安装过程中,您将看到以下提示:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

在提示后,create-next-app 将创建一个以您的项目名称命名的文件夹,并安装所需的依赖项。

需要注意的是:

Next.js 现在默认包含 TypeScript、ESLint 和 Tailwind CSS 配置。 您可以选择在项目的根目录中使用 src 目录来分离应用程序的代码和配置文件。

手动安装

要手动创建一个新的 Next.js 应用,请安装所需的包:

npm install next@latest react@latest react-dom@latest

打开你的 package.json 文件并添加以下脚本:

{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}

这些脚本对应于开发应用程序的不同阶段:

  • dev:运行 next dev 以启动 Next.js 的开发模式。
  • build:运行 next build 以构建应用程序以供生产使用。
  • start:运行 next start 以启动 Next.js 的生产服务器。
  • lint:运行 next lint 以设置 Next.js 的内置 ESLint 配置。

创建目录

Next.js 使用文件系统路由,这意味着您的应用程序的路由是根据文件结构确定的。

app 目录

对于新应用程序,我们建议使用 App Router。这个路由器允许您使用 React 的最新特性,是基于社区反馈的 Pages Router 的演进。

创建一个 app/ 文件夹,然后添加一个 layout.tsx 和 page.tsx 文件。当用户访问您的应用程序的根目录(/)时,将渲染这些文件。

app 文件夹结构

在 app/layout.tsx 中创建一个根布局,包含所需HTML和body 标签:

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}

最后,在 app/page.tsx 中创建一个首页,添加一些初始内容:

export default function Page() {
return <h1>Hello, Next.js!</h1>
}

需要注意的是:如果您忘记创建 layout.tsx,Next.js 在运行开发服务器 next dev 时将自动创建此文件。

了解更多关于使用 App Router 的信息。

pages 目录(可选)

如果您更喜欢使用 Pages Router 而不是 App Router,可以在项目的根目录下创建一个 pages/ 目录。

然后,在 pages 文件夹中添加一个 index.tsx 文件。这将成为您的首页(/):

export default function Page() {
return <h1>Hello, Next.js!</h1>
}

接下来,在 pages/ 中添加一个 _app.tsx 文件以定义全局布局。了解更多关于自定义 App 文件的信息。

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}

最后,在 pages/ 中添加一个 _document.tsx 文件以控制服务器的初始响应。了解更多关于自定义 Document 文件的信息。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}

了解更多关于使用 Pages Router 的信息。

需要注意的是:虽然在同一个项目中可以同时使用两个路由器,但 app 中的路由将优先于 pages。我们建议在新项目中只使用一个路由器,以避免混淆。

public 目录(可选)

创建一个 public 文件夹来存储静态资源,如图像、字体等。public 目录中的文件可以通过基本 URL(/)来引用您的代码。

运行开发服务器 运行 npm run dev 来启动开发服务器。 访问 http://localhost:3000 查看您的应用程序。 编辑 app/layout.tsx(或 pages/index.tsx)文件并保存,以在浏览器中查看更新的结果。

Loading Comments...